<template>
	<div class="animate__animated animate__fadeIn">

    <div class="flexc" style="margin-bottom: 20px;">
      <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>设备名称</div>
      <div><el-input v-model="all.devName" style="width: 350px; margin-left: 30px;" placeholder="请输入设备名称"></el-input></div>
    </div>
    <div class="flexc" style="margin-bottom: 20px;">
      <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>设备编号</div>
      <div><el-input v-model="all.devNo" style="width: 350px; margin-left: 30px;" placeholder="请输入设备编号"></el-input></div>
    </div>
    <div class="flexc" style="margin-bottom: 20px;">
      <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>重要等级</div>
      <div>
        <el-select v-model="all.devLevel" style="width: 350px; margin-left: 30px;"  clearable filterable placeholder="请选择重要等级">
            <el-option  v-for="item in xialaall.zhongyaodengjilist" :key="item.value" :label="item.label" :value="parseInt(item.value)"></el-option>
        </el-select>
      </div>
    </div>
    <div class="flexc" style="margin-bottom: 20px;">
      <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>工作转速</div>
      <div><el-input v-model="all.workRpm" type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" style="width: 350px; margin-left: 30px;" placeholder="请输入工作转速"></el-input></div>
    </div>
    <div class="flexc" style="margin-bottom: 20px;">
      <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>设备类型</div>
      <div>
        <el-select v-model="all.devType" style="width: 350px; margin-left: 30px;"  clearable filterable placeholder="请选择设备类型">
            <el-option  v-for="item in xialaall.shebeileixinglist" :key="item.value" :label="item.label" :value="parseInt(item.value)"></el-option>
        </el-select>
      </div>
    </div>
    <div class="flexc" style="margin-bottom: 20px;">
      <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>设备功率</div>
      <div><el-input v-model="all.devPower" type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" style="width: 350px; margin-left: 30px;" placeholder="请输入设备功率"></el-input></div>
    </div>
    <!-- <div class="flexc" style="margin-bottom: 20px;">
      <div style="width: 100px; text-align: right;">默认图</div>
      <div style="margin-left: 30px;"><chuantu :widths="'200px'" :heights="'200px'" :widths2="'200px'" :heights2="'200px'" :imgs="header_pic" @getimg="getimg" v-if="relo2"></chuantu></div>
    </div> -->
    <div class="flexc" style="margin-bottom: 20px;">
      <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>列表图</div>
      <div style="margin-left: 30px; max-width: 700px;">
        <div class="flexc">
          <div v-for="item in all.imgIds" :key="item" style="height: 150px; margin: 10px 10px 0 0;">
            <div style="width: 104px; height: 104px; border: 2px #ddd solid;"  class="flexcc">
              <img :src="IP_URL + '/api/img/get/file?imgId=' + item" style="max-width: 100px; max-height: 100px;" >
            </div>
            <div class="flexcc" v-if="item == all.imgId" style="margin-top: 10px; cursor: pointer;">默认</div>
          </div>
          <div @click="duotukai" style="color: #005AFF; cursor: pointer;">点击选择图片</div>
        </div>
      </div>
    </div>
    <div style="padding-left: 130px;">
      <el-button type="primary" @click="add">确定</el-button>
    </div>


    <tuku @duotu="duotu" :imgIds="all.imgIds" :imgId="all.imgId" v-if="relo" ref="tuku"></tuku>
	</div>
</template>

<script>

  import { postxiala,getdev,adddev,updatedev } from '@/api/xitong'

  import chuantu from '@/components/chuantu.vue'
  import tuku from '@/components/tuku.vue'
  import left from '../left.vue'
	export default {
		name: 'zuzhiguanli',
    components:{
      left,chuantu,tuku
    },
		data() {
			return {
        all:{
          "devName": "",
          "devNo": "",
          "devLevel": "",
          "devType": "",
          "workRpm": "",
          "devPower": "",
          "orgId": "",
          "imgId": "",
          "imgIds": []
        },
        list:[],
        zuzhilist:[],
        search:{
          treeId:"",
          page:1,
          page_size:20,
        },
        total:0,

        log:false,
        logtitle:"",

        xialaall:{
          zhongyaodengjilist:"",
          shebeileixinglist:""
        },
        header_pic:"",
        relo:false,
        relo2:true,

        IP_URL:process.env.IP_URL
			}
		},

		created() {

      Promise.all([this.getxialalist(),this.getxialalist2()]).then(()=>{
        if(this.$store.state.showwho.treeId){
            this.bianji(this.$store.state.showwho)
        }
        if(this.$store.state.showwho.what == 'add'){
            this.logshow()
        }
      })

		},
		mounted() {

		},
		methods: {
      go2:function(item){
        this.$router.push({
          path:'/cedian',
          query:{
            id:item.value,
            treeId:item.treeId,
            shebei:item.label
          }
        })
      },
      duotukai:function(){

        this.relo = true
        this.$nextTick(()=>{
          this.$refs.tuku.log = true
        })
      },
      duotu:function(val){
        this.all.imgIds = val.xuanzhong
        this.all.imgId = val.moren
        this.relo = false
      },
      getimg:function(item){
        this.header_pic = item.img
        this.all.imgId = item.imgId
      },
      getxialalist:function(){
        return new Promise((res,rej)=>{
          let obj = {
            sysName:"系统配置",
            dictName:"设备管理-重要等级",
            dictType:""
          }
          postxiala(obj).then(response => {
            this.xialaall.zhongyaodengjilist = response.data
            res('1')
          })
        })
      },
      getxialalist2:function(){
        return new Promise((res,rej)=>{
          let obj2 = {
            sysName:"系统配置",
            dictName:"设备管理-设备类型",
            dictType:""
          }
          postxiala(obj2).then(response => {
            this.xialaall.shebeileixinglist = response.data
            res('1')
          })
        })
      },


      bianji:function(item){
        getdev(item.value).then(response => {
          item = response.data
          this.all = {
            devId:item.devId,
            "devName": item.devName,
            "devNo": item.devNo,
            "devLevel": item.devLevel,
            "devType": item.devType,
            "workRpm": item.workRpm,
            "devPower": item.devPower,
            "orgId": item.orgId,
            "imgId": item.imgId,
            "imgIds": item.imgIds
          }
        })
      },
      logshow:function(){

        this.all = {
          devId:"",
          "devName": "",
          "devNo": "",
          "devLevel": "",
          "devType": "",
          "workRpm": "",
          "devPower": "",
          "orgId": this.$store.state.showwho.zuzhiid,
          "imgId": "",
          "imgIds": []
        }

        if(this.xialaall.shebeileixinglist){
          this.xialaall.shebeileixinglist.forEach(item=>{
            if(item.mr){
              this.all.devType = parseInt(item.value)
            }
          })
        }
        if(this.xialaall.zhongyaodengjilist){
          this.xialaall.zhongyaodengjilist.forEach(item=>{
            if(item.mr){
              this.all.devLevel = parseInt(item.value)
            }
          })
        }

      },

      add:function(){
        // if(!this.all.devName || !this.all.devNo || !this.all.devLevel || !this.all.devType || !this.all.workRpm || !this.all.workRpm || !this.all.devPower || !this.all.orgId || !this.all.imgId || !this.all.imgIds){
        //   this.$message.error('请填写完整参数');
        //   return
        // }
        if(this.all.devId){
          updatedev(this.all).then(response => {
            this.$message.success('修改成功');
            this.$emit('gengxin')
          })
        }else{
          adddev(this.all).then(response => {
            this.$message.success('新增成功');
            this.$emit('gengxin')
          })
        }
      },


		}
	}
</script>


<style scoped >

</style>
